<template>
    <div class="search clear">
        <list-top></list-top>
        <div class="mall-position">主页 > 批发商城 > 搜索结果页</div>
        <div class="searchMain clear">
            <div class="searchKeyword">全部结果 > 进口感冒药</div>
            <div class="keyword-nav">
                <div class="groups">
                    <div class="group categoryGroup">
                        <div class="s-head">分类</div>
                        <div class="s-body clear" :class="{autoHeight:categoryAutoHeight == true}">
                            <div class="inner">
                                <a href="javascript:void(0);" v-for="(ocategory,index) in 40" :key="index">西药</a>
                            </div>
                        </div>
                        <div class="s-foot">
                            <button @click="categoryAutoHeight = categoryAutoHeight ? false : true">更多<i class="iconfont icon-jiantou"></i></button>
                        </div>
                    </div>
                    <div class="group reagentGroup">
                        <div class="s-head">药剂类型</div>
                        <div class="s-body clear" :class="{autoHeight:reagentAutoHeight == true}">
                            <div class="inner">
                               <a href="javascript:void(0);" v-for="(oreagent,index) in 40" :key="index">类型</a>
                            </div>
                        </div>
                        <div class="s-foot">
                            <button @click="reagentAutoHeight = reagentAutoHeight ? false : true">更多<i class="iconfont icon-jiantou"></i></button>
                        </div>
                    </div>
                    <div class="group priceGroup">
                        <div class="s-head">价格</div>
                        <div class="s-body clear">
                            <a href="javascript:void(0);" v-for="(oprice,index) in priceList" :key="index">{{oprice.name}}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="searchProductBox">
                <div class="rcdProductMain">
                    <div class="guessYouLike">
                        <div class="g-title">猜你喜欢</div>
                        <ul>
                            <li v-for="(guessYouLike,index) in guessYouLikeList" :key="index">
                                <router-link to="/" class="g-img"><img src="../images/bak09.jpg" alt=""></router-link>
                                <div class="g-name">
                                    <router-link to="/">{{guessYouLike.name}}</router-link>
                                </div>
                                <div class="g-price">￥{{guessYouLike.price}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="searchProductListBox clear">
                    <div class="productMainOperation">
                        <a href="javascript:void(0);" class="active a-sales">销量<i class="iconfont icon-xiangxiajiantoucuxiao"></i></a>
                        <a href="javascript:void(0);" class="a-price active">
                                        价格
                                        <i class="iconfont icon-ue703triangleup"></i>
                                        <i class="iconfont icon-ue704triangledown"></i>
                                    </a>
                        <a href="javascript:void(0);" class="a-time active">
                                        上架时间
                                        <i class="iconfont icon-ue703triangleup"></i>
                                        <i class="iconfont icon-ue704triangledown"></i>
                            </a>
                    </div>
                    <div class="w-line">
                        <div class="floater" style="width:100px;"></div>
                    </div>
                    <div class="searchProductList clear">
                        <div class="productPublicStyle-a" v-for="(oproduct,index) in 15" :key="index">
                            <router-link to="/"><img src="../images/bak09.jpg" alt=""></router-link>
                            <div class="productDetail">
                                <div class="p-name" title="白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈">
                                    <router-link to="/">白云山小菜胡感冒药哈小菜胡感冒药哈白云山小菜胡感冒药哈小菜胡感冒药哈</router-link>
                                </div>
                                <div class="p-category">中成药</div>
                                <div class="p-price">¥268.00</div>
                                <div class="p-producer">桂林医药集团有限公司</div>
                                <el-rate v-model="value10" disabled>
                                </el-rate>
                            </div>
                            <router-link to="/" class="p-delete"><i class="iconfont icon-shanchu"></i></router-link>
                            <router-link to="/" class="p-service"><i class="iconfont icon-kefu"></i><span>客服</span></router-link>
                        </div>
                    </div>
                    <div class="pageBotom">
                        <div class="pageBotomRight">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import listTop from "./public/listTop";
    export default {
        components: {
            listTop,
        },
        data() {
            return {
                activeTick: false,
                priceList: [ //价格
                    {
                        name: "0-99",
                    },
                    {
                        name: "100-199",
                    },
                    {
                        name: "200-399",
                    },
                    {
                        name: "400-699",
                    },
                    {
                        name: "700以上",
                    }
                ],
                guessYouLikeList: [{
                        name: "丁桂儿脐贴",
                        price: "380.00"
                    },
                    {
                        name: "丁桂儿脐贴",
                        price: "380.00"
                    },
                    {
                        name: "丁桂儿脐贴",
                        price: "380.00"
                    }
                ],
                value10:5,
                currentPage4: 4,
                categoryAutoHeight:false,
                reagentAutoHeight:false,
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
        },
        mounted() {}
    }
</script>
<style lang="less">
    @import "css/search.less";
</style>

